<template>
  <div class="home-container">
    <!-- 顶部菜单 -->
    <van-nav-bar class="top-nav">
      <template #right>
        <van-image
          :src="require('@/assets/cameraicon.png')"
          class="right-icon"
        ></van-image>
      </template>
      <template #title>
        <input type="text" class="search" placeholder="搜索" />
        <i class="iconfont icon-search"></i>
      </template>
      <template #left>
        <van-image
          :src="require('@/assets/logo.png')"
          class="left-icon"
        ></van-image>
      </template>
    </van-nav-bar>
    <!-- 标签页 -->
    <van-tabs
      title-active-color="#262626"
      title-inactive-color="#aeaeae"
      class="tabs"
      color="#4a90e2"
      :swipeable="true"
    >
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <goodslist v-if="item.listtype === 1"></goodslist>
        <goodslist2
          v-else
          :themetype="item.themetype"
          :listtype="item.listtype"
        ></goodslist2>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getUserChannels } from '@/api/home.js' // 引入主页相关ajax
import goodslist from '@/views/home/components/goodslist'
import goodslist2 from '@/views/home/components/goodslist2.vue'
export default {
  // 定义属性
  data() {
    return {
      channels: []
    }
  },
  components: {
    goodslist,
    goodslist2
  },
  // 方法集合
  methods: {
    // 1.查询频道列表
    async getChannels() {
      const res = await getUserChannels() // 发送ajax请求
      console.log(res)
      this.channels = res.data // 接收返回频道列表
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getChannels()
  }
}
</script>

<style lang="less">
.home-container {
  // 顶部菜单
  .van-hairline--bottom::after {
    border: none !important;
  } //去除下划线
  .top-nav {
    padding: 0 59px;
    .van-nav-bar__content {
      height: 88px;
    }
    // 清除vant插槽自带padding
    .van-nav-bar__left {
      padding: unset;
    }
    .van-nav-bar__right {
      padding: unset;
    }
    // 设置顶部导航icon大小
    .left-icon {
      width: 54px;
      height: 60px;
    }
    .right-icon {
      padding: unset;
      width: 60px;
      height: 54px;
    }

    // 设置头部搜索框
    .van-nav-bar__title {
      position: relative;
      max-width: unset;
      input {
        width: 384px;
        height: 56px;
        background-color: #f8f8f8;
        border: none;
        padding-left: 50%;
      }
      ::placeholder {
        font-size: 24px;
        color: #cecece;
        line-height: 56px;
      }
      .iconfont {
        font-size: 24px;
        line-height: 56px;
        left: 40%;
        position: absolute;
        color: #d1d1d1;
      }
    }
  }
  // tab栏
  .tabs {
    height: auto;
    // tab栏高度
    .van-tabs__nav--complete {
      height: 80px;
      padding: 0 30px;
      // tab栏标题
      .van-tab__text {
        font-size: 28px;
      }
      //底部滑动条位置
      .van-tabs__line {
        height: 4px;
        width: 24px;
        bottom: 5px;
        left: -15px;
      }
    }
  }
}
</style>
